<template>
  <div>
    <a-card hoverable>
      <!-- v-model:expandedKeys="expandedKeys"  -->
      <a-table
        :columns="columns"
        row-key="id"
        :data="treeData"
        show-empty-tree
        style="margin-top: 20px"
        tree-props="child"
        :loading="loading"
        :pagination="false"
        :row-selection="rowSelection"
        fieldNames=" { key: 'id'
        , title: 'name' , children: 'child' }"
      >
        <template #menu="{ record }">
          <a-switch
            type="line"
            :default-checked="record.menu"
            @change="changeMenu(record, 'menu')"
          />
        </template>
        <template #status="{ record }">
          <a-switch
            type="line"
            :default-checked="record.status"
            @change="changeMenu(record, 'status')"
          />
        </template>
        <template #cell="{ record }">
          <a-space size="0">
            <a-link href="javascript:;" @click="handleItem(record, 'add')">添加子级</a-link>
            <a-link href="javascript:;" @click="handleItem(record, 'edit')">编辑</a-link>
            <a-popconfirm
              :content="`您确定删除${record.name}吗？`"
              @ok="handleItem(record, 'delete')"
              type="warning"
            >
              <a-link href="javascript:;">删除</a-link>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-card>
    <!-- 弹窗 -->
    <handle-menus
      v-if="treeList.length > 0"
      :visibleStatus="visible"
      :title="modalTitle"
      :currentItem="currentItem"
      :treeList="treeList"
      @closeDrawer=";(visible = false), getList()"
    ></handle-menus>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { getMenus, deleteRules } from '@/api/system.js'
import HandleMenus from './components/HandleMenus.vue'
import { Message } from '@arco-design/web-vue'
import { useUserStore } from '@/stores'

const userStore = useUserStore()
const columns = [
  {
    title: '菜单名称',
    dataIndex: 'name'
  },
  {
    title: '请求类型',
    dataIndex: 'method'
  },
  {
    title: '图标',
    dataIndex: 'icon'
  },
  {
    title: '是否菜单',
    dataIndex: 'menu',
    slotName: 'menu'
  },
  {
    title: '状态',
    dataIndex: 'status',
    slotName: 'status'
  },
  {
    title: '操作',
    slotName: 'cell'
  }
]

const treeList = ref([])
const treeData = ref([])
const page = ref(1)
const loading = ref(false)
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  checkStrictly: true
})

//弹窗相关
const visible = ref(false)
const modalTitle = ref('添加菜单')
const currentItem = ref({})

//获取菜单列表
const getList = async () => {
  loading.value = true
  let res = await getMenus(page.value)
  if (res.code === 200) {
    // .map(item => item.children = item.child)
    addFieldName(res.data.list.list, 'child', 'children')
    //会污染，使用深拷贝
    treeData.value = JSON.parse(JSON.stringify(res.data.list.list))
    treeList.value = JSON.parse(JSON.stringify(res.data.list.list))
    treeList.value.unshift({
      name: '顶级菜单',
      id: 0
    })
  }
  loading.value = false
}
getList()

//改变菜单或者状态
const changeMenu = (item, type) => {
  console.log(item, type, '请调用接口')
}
//删除单条或者编辑单条
const handleItem = async (item, type) => {
  if (type != 'delete') {
    currentItem.value = {}
    if (type == 'edit') {
      modalTitle.value = '编辑菜单'
      currentItem.value = item
    } else {
      modalTitle.value = '添加菜单'
      currentItem.value.rule_id = type != '' ? item.rule_id : 0
    }
    visible.value = true
  } else {
    let res = await deleteRules(item.id)
    if (res.code == 200) {
      userStore.getUserInfo()
      Message.success('删除成功')
      getList()
    }
  }
}

//递归添加字段
const addFieldName = (fieldArr, fieldAlias, newFieldName) => {
  fieldArr.forEach((element) => {
    if (element[fieldAlias] && element[fieldAlias].length > 0) {
      element[newFieldName] = element[fieldAlias]
      addFieldName(element[fieldAlias], fieldAlias, newFieldName)
    }
  })
}
</script>

<style lang='scss' scoped>
.modal_title {
  flex: 1;
}
</style>
